<template>
	<view>
		<view>
			<navbar title='Baage校园圈' :is-child="true" />
		</view>
		<!-- 评论弹窗 -->
		<view>
			<u-popup :show="show" @close="close" @open="open" mode="center" :round="10">
				<view class="popup">
					<u--text align="center" size="16" text="发表评论" :bold="true"></u--text>
					<view style="margin: 0 50rpx; margin-top: 10rpx; width: 500rpx;">
						<u--textarea v-model="commentAdd.content" :placeholder="replyName + '请输入评论内容'" count 
							boder="none" height="200rpx" :maxlength="300"
						></u--textarea>
						<view>
							<u-upload
								:fileList="commentAdd.fileList"
								@afterRead="afterRead"
								@delete="deletePic"
								multiple
								:maxCount="8"
								:previewFullImage="true"
								:width="72"
								:height="72"
							></u-upload>
						</view>
						<u-button text="发表评论" color="#637aff" @click="submitComment"></u-button>
					</view>
				</view>
			</u-popup>
		</view>
		<view>
			<!-- 帖子详情 -->
			<view style="margin: 0 15rpx; padding-bottom: 8rpx;">
				<postDetail :posting="posting"></postDetail>
			</view>
			<view style="height: 12rpx; width: 750rpx; background-color: #f0f0f0"></view>
			<view>
				<u-divider text="评论" textColor="#1e1e1e" lineColor="#d9d3cd"></u-divider>
			</view>
			<!-- 帖子评论 -->
			<view style="margin-top: 10rpx;">
				<view v-if="commentList.length != 0">
					<view v-for="(item, index) in commentList" :key="item.id"  @click="openComment(item.id, item.nickName)">
						<postDiscuss :comment="item" @openComment="childOpenComment"></postDiscuss>
					</view>
					<!-- 加载更多 -->
					<view v-if="moreStatus.length != 0" style="margin-top: 8rpx; height: 30rpx; width: 750rpx;" @click="getMoreComment">
						<u-loadmore :status="moreStatus" loadmore-text='点击加载更多' />
					</view>
				</view>
				<view v-else>
					<u-empty 
						mode="comment"
						:icon="img"
					></u-empty>
				</view>
			</view>
		</view>
		<!-- 底部信息 -->
		<view style="padding-bottom: 100rpx;">
			<!-- 版权 -->
			<view>
				<view style="display: flex; flex-direction: column; align-items:center; padding-top: 80rpx;">
					<view>
						<image src="../../static/logo.png" style="width: 200rpx; height: 60rpx;"></image>
					</view>
					<view>
						<text style="color: #AAA; font-weight: 800;">BAAGE.CN 提供技术支持</text>
					</view>
				</view>
			</view>
		</view>
		<view class="postComment" @click="openComment('0')">
			<view>
				<u--image :src="userInfo.avatarUrl != '' ? userInfo.avatarUrl : '/static/user.png' " width="38" height="38"  shape="circle"></u--image>
			</view>
			<view class="postInput">
				<u--input shape="circle" :disabled="true" disabledColor="#ececec" placeholder="发表评论..."></u--input>
			</view>
		</view>
	</view>
</template>

<script>
	
	import postDetail  from '@/components/post-detail/post-detail.vue'
	import postDiscuss from '@/components/post-detail/post-discuss.vue'
	
	import store from '@/store/index.js';
	
	import { getPostingDetail } from '@/apis/posting.js'
	import { uploadFilePromise } from '@/apis/upload.js'
	import { addComment, listComment } from "@/apis/comment.js";
	
	export default {
		components: {
			postDetail,
			postDiscuss
		},
		data() {
			return {
				moreStatus: 'loadmore',
				show: false,
				img: "",
				postingId: '',
				posting: {},
				userInfo: this.$store.state.user,
				replyName: '',
				commentAdd: {
					parentId: '0',
					content: '',
					replyId: '',
					fileList: []
				},
				commentQuery: {
					pageNum: 1,
					pageSize: 10,
					orderByColumn: 'createTime',
					isAsc: 'desc',
				},
				commentCount: -1,
				commentList: []
			}
		},
		methods: {
			open() {
				console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			// 删除图片
			deletePic(event) {
				this.commentAdd.fileList.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.commentAdd.fileList.length
				for (let i = 0; i < lists.length; i++) {
					const result = await uploadFilePromise(lists[i].url)
					let item = this.commentAdd.fileList[fileListLen]
					this.commentAdd.fileList.splice(fileListLen, 1, result.data)
					fileListLen++
				}
			},
			// 打开提交
			openComment(parentId = '0', replyName = "") {
				this.commentAdd.parentId = parentId;
				if (replyName.length != 0) {
					this.replyName = '@' + replyName + "：";
				}
				this.show = true;
			},
			childOpenComment(commentInfo) {
				this.commentAdd.parentId = commentInfo.parentId;
				this.commentAdd.replyId = commentInfo.replyId;
				if (commentInfo.replyName.length != 0) {
					this.replyName = '@' + commentInfo.replyName + "：";
				}
				this.show = true;
			},
			// 提交评论
			submitComment() {
				if (this.commentAdd.content.length  === 0) {
				    uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '内容不能为空'
				    });
				    return;
				}
				let flist = [];
				this.commentAdd.fileList.forEach(f => flist.push(f.path));
				this.commentAdd.imgList = flist;
				this.commentAdd.postingId = this.postingId;
				addComment(this.commentAdd).then(res => {
					uni.showToast({
						icon: 'success',
						position: 'bottom',
						title: '评论成功'
					});
					setTimeout(() => {
						this.getComment()
					}, 500);
				}).finally(r => {
					this.commentAdd =  {
						parentId: '0',
						content: '',
						replyId: '',
						fileList: []
					}
				});
				this.show = false;
			},
			getComment() {
				let _this = this;
				_this.commentQuery.postingId = _this.postingId;
				_this.commentQuery.pageNum =  1;
				listComment(_this.commentQuery).then( res => {
					_this.commentList = res.rows;
					_this.commentCount = res.total;
					if (res.total <= 10) {
						_this.moreStatus = '';
					} else {
						_this.moreStatus = 'loadmore';
					}
				});
			},
			getMoreComment() {
				let _this = this;
				if (_this.commentCount != -1 &&  _this.commentQuery.pageNum * _this.commentQuery.pageSize >= _this.commentCount) {
					_this.moreStatus = "";
					return;
				}
				_this.commentQuery.postingId = _this.postingId;
				_this.commentQuery.pageNum = _this.commentQuery.pageNum + 1;
				_this.moreStatus = "loading";
				listComment(_this.commentQuery).then( res => {
					_this.commentList = [..._this.commentList,...res.rows];;
					_this.commentCount = res.total;
					if (res.total <= _this.commentQuery.pageNum * _this.commentQuery.pageSize) {
						_this.moreStatus = '';
					} else {
						_this.moreStatus = "loadmore";
					}
				});
			}
		},
		//option为object类型，会序列化上个页面传递的参数
		onLoad: function (option) {
			this.postingId = option.id;
			getPostingDetail(this.postingId).then( res => {
				this.posting = res.data;
			});
			this.getComment()
		},
		onShow() {
			console.log("postingId：" + this.postingId)
		}
	}
</script>

<style scoped>
	
	.postComment {
		display: flex;
		position: fixed;
		bottom: 0;
		padding: 0 25rpx;
		background-color: #ffffff;
		width: 750rpx;
	}
	
	.postComment .postInput {
		margin-left: 20rpx;
		width: 600rpx;
	}
	
	.popup {
		width: 600rpx;
		margin-top: 15rpx;
		margin-bottom: 20rpx;
	}

</style>
